<template>
  <view class="header">
    <view class="top"></view>
    <view class="content">
      <view class="main">
        <view @click="handleClick('/pages/travelRequest')">
          <image :src="icon3" mode="widthFix" class="image-style"></image>
          <text class="title">派车申请</text>
        </view>
        <view class="line"></view>
        <view
          style="position: relative"
          @click="handleClick('/pages/applicationRecord?approvalStatus=0')"
        >
          <image
            :src="icon2"
            mode="widthFix"
            class="image-style-center"
          ></image>
          <view class="count" v-if="total">
            {{ total > 99 ? "99+" : total }}
          </view>
        </view>
        <view class="line"></view>
        <view @click="handleClick('/pages/applicationRecord')">
          <image :src="icon1" mode="widthFix" class="image-style"></image>
          <text class="title">申请记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import icon1 from "@/static/icon1.png";
import icon2 from "@/static/icon2.png";
import icon3 from "@/static/icon3.png";

export default {
  name: "NavBar",
  components: {},
  props: {
    total: Number,
  },
  data() {
    return {
      icon1: icon1,
      icon2: icon2,
      icon3: icon3,
    };
  },
  computed: {},
  watch: {},
  onLoad() {},
  methods: {
    handleClick(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss">
.header {
  height: 130px;
  margin-top: -1px;
  .top {
    background: #1ca480;
    height: 25px;
    border-bottom: 15px solid #017161;
  }
  .content {
    background: #fff;
    width: 308px;
    height: 80px;
    position: relative;
    left: 50%;
    margin-left: -164px;
    top: -25px;
    box-shadow: 0px 5px 10px -5px #ccc;
    padding: 10px;
    .main {
      display: flex;
      justify-content: space-around;
      text-align: center;
      .image-style {
        width: 80px;
      }
      .image-style-center {
        width: 110px;
      }
      .title {
        display: block;
        font-size: 26upx;
        margin-top: -10px;
      }
      .count {
        position: absolute;
        right: 18px;
        top: 6px;
        color: #fff;
        font-size: 13px;
        background: red;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 100%;
      }
      .line {
        width: 1px;
        height: 60px;
        margin-top: 10px;
        background: #e5e5e5;
      }
    }
  }
}
</style>
